<template>
  <el-table :data="tableData" style="width: 100%" :header-cell-style="{ background: '#f2f2f2', color: '#333', fontWeight: 600, }">
    <el-table-column prop="xueDate" label="日期" align="center"></el-table-column>
    <el-table-column prop="shi" label="学习时长" align="center"> </el-table-column>
    <!-- <el-table-column label="完成度%" align="center"> 
      <template slot-scope="scope">{{ scope.row.du === null ? '--' : scope.row.du + '%' }}</template>
    </el-table-column> -->
    <el-table-column label="操作" align="center">
      <template slot-scope="scope">
        <el-tooltip class="item" effect="dark" content="报告仅针对评测模式和心理健康" placement="top" v-if="scope.row.pattern == 2 && scope.row.du == 1">
          <el-button
            @click.native.prevent="theReport(scope.$index, scope.row)"
            type="text"
            size="small"
          >
            报告
          </el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="教学模式不提供学习报告" placement="top" v-else>
          <el-button
            type="text"
            size="small"
          >
            --
          </el-button>
        </el-tooltip>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      default: null
    }
  },
  methods: {
    theReport(index,row) {
      this.$emit('theReport',index,row);
    }
  }
}
</script>
<style scoped>
.el-button.is-disabled{ color: #C0C4CC !important; }
.el-button--small{ font-size: 14px !important; }
.el-button--text{ color: #105CFB !important; }
</style>